---
sidebar_position: 1
---

# interpolate

`interpolate` lets you map a value from one range to another using linear interpolation.

import Interpolate from '@site/src/examples/Interpolate';
import InterpolateSrc from '!!raw-loader!@site/src/examples/Interpolate';

<InteractiveExample src={InterpolateSrc} component={Interpolate} />

## Reference

```javascript
import { interpolate } from 'react-native-reanimated';

function App() {
  const animatedStyle = useAnimatedStyle(() => ({
    // highlight-next-line
    opacity: interpolate(sv.value, [0, 100], [0, 1], Extrapolation.CLAMP),
  }));
}
```

<details>
<summary>Type definitions</summary>

```typescript
enum Extrapolation {
  IDENTITY = 'identity',
  CLAMP = 'clamp',
  EXTEND = 'extend',
}

type ExtrapolationAsString = 'identity' | 'clamp' | 'extend';

export type ExtrapolationType =
  | ExtrapolationConfig
  | Extrapolation
  | ExtrapolationAsString
  | undefined;

function interpolate(
  value: number,
  input: readonly number[],
  output: readonly number[],
  extrapolate?: ExtrapolationType
): number;
```

</details>

### Arguments

#### `value`

A number that is going to be mapped to the `output` range.

#### `input`

An array of numbers specifying the input range of the interpolation.

#### `output`

An array of numbers specifying the output range of the interpolation. It should have at least the same number of points as the input range.

#### `extrapolate` <Optional/>

The `extrapolate` parameter determines what happens when the `value` goes beyond the `input` range. Defaults to `Extrapolation.EXTEND`.

Available types:

- `Extrapolation.EXTEND` - predicts the values beyond the output range.
- `Extrapolation.CLAMP` - clamps the value to the edge of the output range.
- `Extrapolation.IDENTITY` - returns the provided value as is.

import useBaseUrl from '@docusaurus/useBaseUrl';

<div style={{display: "flex", justifyContent: "center", textAlign: "center"}}>

<div style={{ maxWidth: 320 }}>
  <img src={useBaseUrl('/img/extrapolation/extend.png')} />
  <p>EXTEND</p>
</div>
<div style={{ maxWidth: 320 }}>
  <img src={useBaseUrl('/img/extrapolation/clamp.png')} />
  <p>CLAMP</p>
</div>
<div style={{ maxWidth: 320 }}>
  <img src={useBaseUrl('/img/extrapolation/identity.png')} />
  <p>IDENTITY</p>
</div>

</div>

This parameter also accepts string values:

- `"extend"`
- `"clamp"`
- `"identity"`

By default, the `extrapolate` parameter applies the value passed to both edges of the range. To specify extrapolation to a particular edge, you can pass an object:

```javascript
const opacity = interpolate(
  sv.value,
  [0, 100],
  [0, 1],
  // highlight-next-line
  { extrapolateLeft: Extrapolation.CLAMP }
);
```

### Returns

`interpolate` returns a mapped value within the output range.

## Example

import InterpolateRotation from '@site/src/examples/InterpolateRotation';
import InterpolateRotationSrc from '!!raw-loader!@site/src/examples/InterpolateRotation';

<InteractiveExample
  src={InterpolateRotationSrc}
  component={InterpolateRotation}
  label="Grab and drag any of the squares. The dashed lines indicate the range of the interpolation."
/>

## Platform compatibility

<PlatformCompatibility android ios web />
